<template>
  <div>
    
      <todo-input  @add="onAddNewTask"></todo-input>
      <todo-list :todolist="tasklist"></todo-list>
      <div class="todobtn">
        <todo-button v-model:active="indexBtn"></todo-button>
      </div>
      

  </div>
</template>

<script>
import TodoInput from './components/todo-input.vue'
import TodoButton from './components/todo-button.vue'
import TodoList from './components/todo-list.vue'
export default {
  name: 'MyApp',
  components: {
    TodoList,
    TodoButton,
    TodoInput
  },
  data(){
    return{
      todolist:[
        {id:1,task:'周一早晨9点开会',done:false },
        {id:2,task:'周一晚上8点开会',done:false },
        {id:3,task:'准备周三上午的演讲稿',done:false }
      ],
      index:4,
      indexBtn:0
    }
  },
  methods:{
    onAddNewTask(e){
      this.todolist.push({
        // id:this.todolist.length+1,
        id:this.index,
        task:e,
        done:false
      })
      this.index++
    }
  },
  computed:{
    tasklist(){
      switch(this.indexBtn){
        case 0 :
          return this.todolist
          case 1 :
            return this.todolist.filter(x=>x.done) 
            case 2 :
              return this.todolist.filter(x=>!x.done)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.todobtn{
  width: 300px;
  display: flex;
  justify-content: center;
}
</style>